<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="24">
          <el-form-item label="学校名称" prop="schoolName">
            <el-input v-model="formData.schoolName" placeholder="请输入学校名称" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="学校性质" prop="schoolQuality">
            <el-input v-model="formData.schoolQuality" placeholder="请输入学校性质" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="官方地址" prop="officialAddress">
            <el-input v-model="formData.officialAddress" placeholder="请输入官方地址" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="院校电话" prop="schoolPhone">
            <el-input v-model="formData.schoolPhone" placeholder="请输入院校电话" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="院校地址" prop="schoolAddress">
            <el-input v-model="formData.schoolAddress" placeholder="请输入院校地址" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="标签" prop="schoolLabel">
            <el-input v-model="formData.schoolLabel" placeholder="请输入标签" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="简介" prop="synopsis">
            <el-input v-model="formData.synopsis" type="textarea" placeholder="请输入简介"
              :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <!-- 首图 -->
        <el-col :span="24">
          <el-form-item label="首图" prop="firstImage">
            <el-upload class="upload-demo" action="http://192.168.1.54:8080/common/upload" :file-list="fileList"
              :on-preview="handlePreview" :on-remove="handleRemove" :on-success="update" list-type="picture-card">
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>

          </el-form-item>
        </el-col>
        <!-- 院校图标 -->
        <el-col :span="24">
          <el-form-item label="院校图标">
            <el-upload class="upload-demo" action="http://192.168.1.54:8080/common/upload" :file-list="fileList2"
              :on-preview="handlePreview" :on-remove="handleRemove2" list-type="picture-card" :on-success="update2">
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>

          </el-form-item>
        </el-col>
        <!-- 院校图片 -->
        <el-col :span="24">
          <el-form-item label="院校图片" prop="image">
            <el-upload class="upload-demo" action="http://192.168.1.54:8080/common/upload" :file-list="fileList3"
              :on-preview="handlePreview" :on-remove="handleRemove3" :on-success="update3" list-type="picture-card">
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>

          </el-form-item>

        </el-col>

        <el-col :span="14">
          <el-form-item label="状态" prop="isDeleted">
            <el-select v-model="formData.isDeleted" placeholder="请选择状态" clearable :style="{ width: '100%' }">
              <el-option v-for="(item, index) in isDeletedOptions" :key="index" :label="item.label" :value="item.value"
                :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="是否推荐" prop="isRecommend">
            <el-select v-model="formData.isRecommend" placeholder="请选择是否推荐" clearable :style="{ width: '100%' }">
              <el-option v-for="(item, index) in isRecommendOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>


        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>

      <el-dialog :visible.sync="falsc" :append-to-body="true">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-row>




  </div>
</template>
<script>
import { addschool, updateschool } from '../../../api/fetv/school';
// import { addImage } from "../../../api/fetv/image";
export default {
  props: {
    schoolList: {
      type: Object,
      required: true
    },
    flag: {
      type: Number,
      required: true
    }
  },
  fileName: { userId: 1 },
  components: {},
  data() {
    return {
      fileList: [],
      fileList2: [],
      fileList3: [],
      falsc: false,
      dialogImageUrl: "",
      formData: {
        schoolName: undefined,
        schoolLabel: undefined,
        officialAddress: undefined,
        schoolPhone: undefined,
        schoolAddress: undefined,
        schoolLabel: undefined,
        synopsis: undefined,
        isDeleted: undefined,
        isRecommend: undefined,
        firstImage: '',
        schoolIcon: '',
        image: '',
      },
      rules: {
        schoolName: [{
          required: true,
          message: '请输入学校名称',
          trigger: 'blur'
        }],
        schoolQuality: [],
        schoolLabel: [],
        officialAddress: [],
        schoolPhone: [],
        schoolAddress: [],
        synopsis: [{
          required: true,
          message: '请输入简介',
          trigger: 'blur'
        }],
        isDeleted: [{
          required: true,
          message: '请选择状态',
          trigger: 'change'
        }],
        isRecommend: [{
          required: true,
          message: '请选择是否推荐',
          trigger: 'change'
        }],
        firstImage: [{
          required: true,
          message: '请上传首图',
          trigger: 'change'
        }],
        image: [{
          required: true,
          message: '请上传院校图片',
          trigger: 'change'
        }],
      },
      isDeletedOptions: [{
        "label": "启用",
        "value": 1
      }, {
        "label": "禁用",
        "value": 0
      }],
      isRecommendOptions: [{
        "label": "推荐",
        "value": 1
      }, {
        "label": "不推荐",
        "value": 0
      }],
    }
  },
  computed: {},
  watch: {},
  created() {
    // 如果是有数据传过来,直接用传过来的数据代替formData 格式化图片内容
    if (this.schoolList.schoolName) {
      this.formData = this.schoolList

      if (this.schoolList.firstImage.includes(',')) {
        const arr = this.schoolList.firstImage.split(",")
        arr.forEach(item => {
          this.fileList.push({ url: item })
        });
      } else {
        this.fileList.push({ url: this.schoolList.firstImage })
      }

      if (this.schoolList.schoolIcon) {
        if (this.schoolList.schoolIcon.includes(',')) {
          const arr = this.schoolList.schoolIcon.split(",")
          arr.forEach(item => {
            this.fileList2.push({ url: item })
          });
        } else {
          this.fileList2.push({ url: this.schoolList.schoolIcon })
        }
      }

      if (this.schoolList.image) {
        if (this.schoolList.image.includes(',')) {

          const arr = this.schoolList.image.split(",")
          arr.forEach(item => {
            this.fileList3.push({ url: item })
          });
        } else {

          this.fileList3.push({ url: this.schoolList.image })
          console.log(this.fileList3);
        }
      }
    }


  },
  mounted() { },
  methods: {
    // 将传入的图片加入到formData
    update(response, file, fileList) {
      if (this.formData.firstImage) {
        this.formData.firstImage = this.formData.firstImage + ',' + file.response.fileName
      } else {
        this.formData.firstImage = file.response.fileName
      }
    },

    update2(response, file, fileList) {
      console.log(file.response);
      if (this.formData.schoolIcon) {
        this.formData.schoolIcon = this.formData.schoolIcon + ',' + file.response.fileName
      } else {
        this.formData.schoolIcon = file.response.fileName
      }
    },

    update3(response, file, fileList) {
      if (this.formData.image) {
        this.formData.image = this.formData.image + ',' + file.response.fileName
      } else {
        this.formData.image = file.response.fileName
      }
    },



    // 新增院校函数
    async releaseAddschool() {
      try {
        console.log(this.formData);
        const res = await addschool(this.formData)
        if (res.code === 200) {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.$emit('update', false);
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 修改院校函数
    async releaseupdateschool() {
      try {
        console.log(this.formData);
        const res = await updateschool(this.formData)
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.$emit('update', false);
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 删除图片
    handleRemove(file, fileList) {
      const arr = this.formData.firstImage.split(",")
      arr.forEach((item, index) => {
        if (item === file.url) {
          arr.splice(index, 1)
        }
      });
      this.formData.firstImage = arr.join(",")
    },

    handleRemove2(file, fileList) {
      const arr = this.formData.schoolIcon.split(",")
      arr.forEach((item, index) => {
        if (item === file.url) {
          arr.splice(index, 1)
        }
      });
      this.formData.schoolIcon = arr.join(",")
    },

    handleRemove3(file, fileList) {
      const arr = this.formData.image.split(",")
      arr.forEach((item, index) => {
        if (item === file.url) {
          arr.splice(index, 1)
        }
      });
      this.formData.image = arr.join(",")
    },
    // 放大图片
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.falsc = true;
    },
    // 提交表单
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // 如果传来的flag是1就是添加是0就是修改
        if (this.flag) {
          this.releaseAddschool()
        } else {
          this.releaseupdateschool()
        }

      })
    },
    //重置表单
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    uploadSucceeded(event, file, fileList) {
      console.log(fileList);
    }
  }
}

</script>
<style lang="scss" scoped>
:v-deep .el-message-box__wrapper {
  z-index: 6000 !important;
}
</style>
